<template>
  <div>
    <full-page :options="options" ref="fullpage">
      <div class="section">
        <div class="box1 box" >
          <NumberGrow :value="100"></NumberGrow>
          <span class="hovertree-upslide" @click="ceshi"></span>
        </div>
      </div>
      <div class="section">
        <div class="box2 box">
          <NumberGrow :value="100"></NumberGrow>
          <span class="hovertree-upslide" @click="ceshi"></span>
        </div>
      </div>
      <div class="section">
        <div class="box3 box">
          <NumberGrow :value="100"></NumberGrow>
          <span class="hovertree-upslide" @click="ceshi"></span>
        </div>
      </div>
    </full-page>
  </div>
</template>

<script>
  export default {
    components:{
      NumberGrow:()=>import('./NumberGrow')
    },
    data () {
      return {
        options: {
          licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
          afterLoad: this.afterLoad,
          scrollOverflow: true,
          scrollBar: false,
          menu: '#menu',
          // navigation: true,
          // anchors: ['page1', 'page2', 'page3'],
          sectionsColor: ['#0798ec', '#ff5f45', '#0798ec', '#fec401', '#1bcee6', '#ee1a59', '#2c3e4f', '#ba5be9', '#b4b8ab']
        }
      }
    },
    methods:{
      afterLoad() {

      },
      ceshi(){
        fullpage_api.moveSectionDown();
      }
    },
  }
</script>

<style lang="scss" scoped>
  .box{
    position: relative;
    height: 100%;
  }
  .hovertree-upslide {
    position: absolute;
    display: inline-block;
    left: 0;
    right: 0;
    bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
    width: .7rem;
    height: .7rem;
    z-index: 99;
    animation: fadeOutUp 1.5s infinite ease-in-out;
    background-image: url(https://piccdn.luojilab.com/fe-oss/default/MTU3NTQ0MDg2ODA1.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%;
  }
</style>
